<template>
	<view>
		<image src="../../static/ihgPic/ihg.png" mode="" style="width: 152rpx; height: 134rpx; margin: 40rpx;"></image>
	</view>
	<view class="">
		<view class="diyihang">
			IHG闪“<image src="../../static/ihgPic/yao.png" mode="" style="width: 62rpx; height: 60rpx;" class="dangetext"></image>”秘笈
		</view>
		<view class="dierhang">
			你敢挑战吗？
		</view>
		<view class="disanhang">
			5把开启IHG职业宝藏的魔法钥
		</view>
		<view class="disihang">
			匙，正静静等待勇士们的到来。
		</view>
		<view class="zhiwen" @click="handlefirst">
			<image src="../../static/ihgPic/gunag.png" mode="" style="width: 254rpx; height: 40rpx;" class="gundong"></image>
			<image src="../../static/ihgPic/scan.png" mode="" style="width: 254rpx; height: 327rpx;"></image>
		</view>
		<view class="wenzi">
			请扫描指纹进入
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			handlefirst() {
				uni.navigateTo({
					url:'/pages/one-game/one-game'
				})
			}
		}
	}
</script>

<style scoped>
	page {
		background-image: url(../../static/ihgPic/beiji.png);
	}
	
	.diyihang {
		text-align: center;
		color: #fffc00;
		font-size: 60rpx;
		font-weight: bolder;
	}
	.dangetext {
		position: relative;
		top: 10rpx;
	}
	.dierhang {
		margin-left: 66rpx;
		text-align: center;
		color: #fffc00;
		font-size: 90rpx;	
		/* font-weight: bolder; */
	}
	.disanhang {
		color: #fff;
		font-weight: bold;
		text-align: center;
		font-size: 36rpx;
	}
	.disihang {
		margin-left: 20rpx;
		color: #fff;
		font-weight: bold;
		text-align: center;
		font-size: 36rpx;
	}
	.zhiwen {
		text-align: center;
		margin-top: 15%;
		position: relative;
	}
	.wenzi {
		color: #ededed;
		font-size: 30rpx;
		text-align: center;
		margin-top: 8%;
	}
	.gundong {
		z-index: 99;
		position: absolute;
		top: 0rpx;
		animation: scan 6s linear infinite;
	}
	@keyframes scan {
		0% {
			top: 0;
		}
		49.9% {
			top: 280rpx;
			transform: rotate(0);
		}
		50% {
			top: 280rpx;
			transform: rotate(180deg);
		}
		99.9% {
			top: 0;
			transform: rotate(180deg);
		}
		100% {
			top: 0;
			transform: rotate(0);
		}
	}

</style>
